<div class="layui-fluid">
    <div class="layui-card">

        <div class="layui-card-body">

            <button id="refresh" class="layui-btn layuiadmin-btn-admin layui-btn-sm" title="刷新"><i
                    class="layui-icon layui-icon-refresh-3"></i>
            </button>
            <button class="layui-btn layuiadmin-btn-admin layui-btn-sm" title="添加" data-type="add"><i
                    class="layui-icon layui-icon-add-1"></i>添加
            </button>
            <button id="btnExpandAll" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe668;</i>展开全部
            </button>
            <button id="btnFoldAll" class="layui-btn layui-btn-sm">
                <i class="layui-icon">&#xe66b;</i>折叠全部
            </button>
            <!--                <button id="btnExpand" class="layui-btn layui-btn-sm layui-btn-primary">-->
            <!--                    <i class="layui-icon">&#xe625;</i>展开2层-->
            <!--                </button>-->
            <!--                <button id="btnFold" class="layui-btn layui-btn-sm layui-btn-primary">-->
            <!--                    <i class="layui-icon">&#xe623;</i>折叠2层-->
            <!--                </button>-->
            <input class="layui-input" id="edtSearch" placeholder="输入关键字"
                   style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;"/>
            <div class="layui-btn-container" style="display: inline-block;">
                <button id="btnSearch" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe615;</i>搜索
                </button>
                <button id="btnClearSearch" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#x1006;</i>清除搜索
                </button>
            </div>

            <table class="layui-table layui-form" id="demoTreeTable1"></table>
            <!-- 表格操作列 -->
            <script type="text/html" id="demoTreeTableBar1">
                <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>

            <!-- 表格状态列 -->
            <script type="text/html" id="demoTreeTableState1">
                <input type="checkbox" id="aaa" lay-filter="ckState" value="{{d.status}}" lay-skin="switch"
                       lay-text="正常|锁定" {{d.status==1?'checked':''}}/>
            </script>
        </div>
    </div>
</div>
<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    var addMenu = "{:url('rule/add')}", editMenu = "{:url('rule/edit')}", updateMenu = "{:url('rule/updateMenu')}",
        deleteMenu = "{:url('rule/del')}", statusMenu = "{:url('rule/checkStatus')}";
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: '../layuiadmin/lib/extend/treeTable/treeTable'
    }).use(['layer', 'util', 'treeTable', 'table', 'form'], function () {
        var $ = layui.$, treeTable = layui.treeTable, table = layui.table;
        var util = layui.util, form = layui.form;
        var insTb = "";
        $.get("{:url('rule/index')}", function (result) {
            // 渲染表格
            insTb = treeTable.render({
                elem: '#demoTreeTable1',
                treeDefaultClose: true,
                data: result,
                tree: {
                    iconIndex: 1,
                    arrowType: 'arrow2',   // 自定义箭头风格
                    getIcon: function (d) {  // 自定义图标
                        if (d.children && d.children.length > 0) {  // 判断是否有子集
                            return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
                        } else {
                            return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
                        }
                    }
                },
                cols: [
                    {type: 'checkbox'},
                    {field: 'id', title: 'ID'},
                    {field: 'title', title: '名称'},
                    {field: 'name', title: '规则'},
                    {
                        field: 'icon',
                        title: '图标', templet: function (item) {
                            return '<i class="layui-icon ' + item.icon + '">';
                        }
                    },
                    {
                        field: 'create_time', title: '创建时间'
                    },
                    {
                        field: 'status',
                        title: '状态',

                        templet: function (item) {
                            return '<input type="checkbox" lay-skin="switch" data-id="' + item.id + '" lay-filter="status" lay-text="开启|禁用"' + (item.status ? "checked" : "") + '>';
                        }
                    },
                    {
                        field: 'ismenu',
                        title: '菜单',

                        templet: function (item) {
                            return '<input type="checkbox" lay-skin="switch" data-id="' + item.id + '" lay-filter="menu" lay-text="是|否"' + (item.ismenu ? "checked" : "") + '>';
                        }
                    },
                    {align: 'center', toolbar: '#demoTreeTableBar1', title: '操作'}
                ],
                text: {
                    none: '<div style="padding: 15px 0;">哎呀，一条数据都没有~</div>'
                }
            });

        });

        treeTable.on('tool(demoTreeTable1)', function (obj) {
            var event = obj.event;
            param = $.param({'id': obj.data.id});
            if (event === 'del') {
                layer.confirm("确定删除此菜单吗？", function (t) {
                    $.ajax({
                        url: deleteMenu + '?' + param, success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                                    layer.close(t); //关闭弹层
                                    location.reload();
                                });
                            } else {
                                layer.msg(res.msg, {icon: 5});
                                return false;
                            }
                        }
                    });
                });
            } else if (event == 'edit') {
                layer.open({
                    type: 2
                    , skin: 'layui-layer-molv'
                    , title: '编辑菜单'
                    , content: editMenu + '?' + param
                    , area: ['50%', '60%']
                    , maxmin: true
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'LAY-user-back-submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                url: editMenu + '?' + param,
                                type: 'post',
                                data: field,
                                success: function (res) {
                                    if (res.code === 200) {
                                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                                            layer.close(index); //关闭弹层
                                            location.reload();
                                        });
                                    } else {
                                        layer.msg(res.msg, {icon: 5});
                                        return false;
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            }
        });
        form.on('switch(status)', function (obj) {
            var param = $.param({'id': $(obj.elem).data('id')});
            status = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: statusMenu + '?' + param, data: {'status': status}, type: 'post', success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function (t) {
                            layer.close(t); //关闭弹层
                            location.reload();
                        });
                    } else {
                        layer.msg(res.message, {icon: 5});
                        return false;
                    }
                }
            });

        });
        form.on('switch(menu)', function (obj) {
            var param = $.param({'id': $(obj.elem).data('id')});
            ismenu = obj.elem.checked ? 1 : 0;
            $.ajax({
                url: statusMenu + '?' + param, data: {'ismenu': ismenu}, type: 'post', success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1, time: 1000}, function (t) {
                            layer.close(t); //关闭弹层
                            location.reload();
                        });
                    } else {
                        layer.msg(res.message, {icon: 5});
                        return false;
                    }
                }
            });

        });
        // 全部展开
        $('#btnExpandAll').click(function () {
            insTb.expandAll();
        });
        // 全部折叠
        $('#btnFoldAll').click(function () {
            insTb.foldAll();
        });
        $('#btnSearch').click(function () {
            var keywords = $('#edtSearch').val();
            if (keywords) {
                insTb.filterData(keywords);
            } else {
                insTb.clearFilter();
            }
        });
        $('#btnClearSearch').click(function () {
            insTb.clearFilter();
        });
        $('#refresh').click(function () {
            location.reload();
        });
        $(document).on('mouseenter', '*[lay-tips]', function () {
            layer.tips($(this).attr('lay-tips'), this, {tips: [1, '#FF5722'], time: -1});
        }).on('mouseleave', '*[lay-tips]', function () {
            layer.closeAll('tips');
        });
        var active = {
            add: function () {
                layer.open({
                    type: 2
                    , skin: 'layui-layer-molv'
                    , title: '添加菜单'
                    , content: addMenu
                    , area: ['50%', '60%']
                    , maxmin: true
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index]
                            , submitID = 'LAY-user-back-submit'
                            , submit = layero.find('iframe').contents().find('#' + submitID);
                        //监听提交
                        iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
                            var field = data.field; //获取提交的字段
                            //提交 Ajax 成功后，静态更新表格中的数据
                            $.ajax({
                                url: addMenu,
                                type: 'post',
                                data: field,
                                success: function (res) {
                                    if (res.code === 200) {
                                        layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                                            layer.close(index); //关闭弹层
                                            location.reload();
                                        });
                                    } else {
                                        layer.msg(res.msg, {icon: 5});
                                        return false;
                                    }
                                }
                            });
                        });
                        submit.trigger('click');
                    }
                });
            },

        }
        $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>